<nz-drawer
  nzClosable="false"
  [nzExtra]="extra"
  [nzVisible]="visible" nzPlacement="right"
  [nzTitle]="title"
  [nzWidth]="500"
  (nzOnClose)="onClose()">
  <ng-container *nzDrawerContent>
    <message *ngIf="!isGranted()" [type]="'warning'" [content]="permissionDenyMsg"></message>

    <form nz-form [formGroup]="envForm" (ngSubmit)="doSubmit()" nzLayout="vertical">
      <nz-form-item>
        <nz-form-label nzRequired i18n="@@common.name">Name</nz-form-label>
        <nz-form-control nzErrorTip="Environment name is mandatory!" i18n-nzErrorTip="@@org.project.envNameMandatory">
          <input type="text" nz-input formControlName="name" placeholder="Name" i18n-placeholder="@@common.name"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label
          nzRequired
          i18n-nzTooltipTitle="@@common.key-input-description"
          nzTooltipTitle="We use the key to give you friendly URLs & RNs. Keys should only contain letters, numbers, ., _ or -.">
          Key
        </nz-form-label>
        <nz-form-control nzHasFeedback i18n-nzValidatingTip="@@common.validating" nzValidatingTip="Validating..."
                         [nzErrorTip]="keyErrorTpl">
          <input nz-input formControlName="key" i18n-placeholder="@@common.key-generated-from-name"
                 placeholder="Key can be auto-generated from name"/>
          <ng-template #keyErrorTpl let-control>
            <ng-container *ngIf="control.hasError('required')" i18n="@@common.key-cannot-be-empty">Key cannot be empty</ng-container>
            <ng-container *ngIf="control.hasError('duplicated')" i18n="@@common.key-has-been-used">This key has been used</ng-container>
            <ng-container *ngIf="control.hasError('unknown')" i18n="@@common.key-validation-failed">Key validation failed</ng-container>
          </ng-template>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label i18n="@@org.project.envDescription">Description</nz-form-label>
        <nz-form-control>
          <input type="text" nz-input formControlName="description" placeholder="Description"
                 i18n="@@org.project.envDescriptionPlaceholder"/>
        </nz-form-control>
      </nz-form-item>
    </form>

    <button [disabled]="!isGranted()" class="submit-btn" (click)="doSubmit()" nz-button [nzType]="'primary'"
            [nzLoading]="isLoading" i18n="@@common.save">Save</button>
  </ng-container>
  <ng-template #extra>
    <i (click)="onClose()" nz-icon nzType="icons:icon-close"></i>
  </ng-template>
</nz-drawer>

